<template>
  <div>
    <header>
      <h1>请发表对React的评论</h1>
    </header>
    <section>
      <Add :addComment="addComment"/>
      <List :comments="comments" 
      :deleteComment="deleteComment"/>
    </section>
  </div>
</template>

<script>
import Add from './comments/Add.vue';
import List from './comments/List.vue';

export default {
  data () {
    return {
      comments: [
        {
          name: 'BOB',
          content: 'Vue不错'
        },
        {
          name: 'Sanday',
          content: 'Hello'
        },
        {
          name: 'Tom',
          content: '猫猫'
        }
      ]
    }
  },
  methods: {
    // 添加评论
    addComment(comment) {
      this.comments.unshift(comment)
    },
    // 删除指定下标评论
    deleteComment(index) {
      this.comments.splice(index, 1)
    }
  },
  components: {
    Add,
    List
  }
}
</script>

<style lang="scss">
  header{
    background: #000;
    color: #ffffff;
    padding: 20px;
  }
  section{
    border: 1px solid #000;
  }
</style>